<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表⽩墙</title>
  <style>
      * {
           margin: 0;
           padding: 0;
      }
       .container {
           width: 400px;
           margin: 0 auto;
      }
       h1 {
           text-align: center;
           padding: 20px 0;
      }
       p {
           color: #666;
           text-align: center;
           font-size: 14px;
           padding: 10px 0;
      }
       .row {
           height: 40px;
           display: flex;
           justify-content: center;
           align-items: center;
      }
       span {
           width: 100px;
           line-height: 40px;
      }
       .edit {
           width: 200px;
           height: 30px;
      }
       .submit {
           width: 304px;
           height: 40px;
           color: white;
           background-color: orange;
           border: none;
      }
       .submit:active {

           background-color: #666;
      }
   </style>
  <script scr="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="container" class="container">
  <h1>表⽩墙</h1>
  <p>输⼊后点击提交, 会将信息显示在表格中</p>
  <div class="row">
    <span>谁: </span>
    <input id="from" class="edit" type="text">
  </div>
  <div class="row">
    <span>对谁: </span>
    <input id="to" class="edit" type="text">
  </div>
  <div class="row">
    <span>说什么: </span>
    <input id="message" class="edit" type="text">
  </div>
  <div class="row">
    <input type="button" value="提交" class="submit" onclick="mySubmit()">
  </div>
  <div id="allMsg">
    <!-- <div class="row">
      小猫对小狗说: 喵~
    </div>
    <div class="row">
      小黑对小白说: 拜拜~
    </div> -->
  </div>
</div>
<script>
  function mySubmit(){
    var from=jQuery("#from");
    var to=jQuery("#to");
    var msg=jQuery("#message");
    // todo:1.非空校验
    //2.ajax 提交数据给后端
    jQuery.ajax({
        url:"message/add",      //提交到后端的地址
        type:"POST",             //提交类型
        data:{
          from:from.val(),
          to:to.val(),
          msg:msg.val()
        },                   //参数
        success:function(result){   //后端返回给前端的数据
            if(result!=null && result>0){
              alert("恭喜，添加成功！");
              //  todo: 刷新表白列表
              getAllMsg();
            }else{
              alert("抱歉，添加失败，请重试！");
            }
        }
    });
  }
  function getAllMsg(){
    jQuery.ajax({
      url:"message/list",
      type:"GET",
      data:{},
      success:function(result){
        if(result!=null&&result.length>0){
          var msgHtml="";
            for( var i=0;i<result.length;i++){
               msgHtml+='<div class="row">'+result[i].from+'对'+result[i].to+'说：'+result[i].msg+'</div>';
            }
            jQuery("#allMsg").html(msgHtml);
        }else if(result!=null&&result.length==0){
             console.log("没有表白信息");
        }else{
          alert(访问出错);
        }
      }
    });
  }
  getAllMsg();
</script>
</body>
</html>
